<template>
  <view class="pay-deposit">
    <view class="deposit-info">
      <view class="deposit-notice">
        <image src="@/static/images/sign.png" mode=""></image>
        <text>充值押金；还宝后随时可退</text>
      </view>
      <view class="deposit-price">
        <p class="title">押金金额（元）</p>
        <p class="price">{{amount}}</p>
      </view>
    </view>
    <view class="deposit-explain">
      <text>1、充电宝归还并完成支付后，可在【我的—押金】申请 押金退还; </text>
      <text>2、申请押金退还后预计1~3个工作日退还至原支付账户。</text>
    </view>
    <view class="deposit-btn">
      <van-button @click="payDesposit" color="linear-gradient(#0366E0, #1E50DC)" type="info">
        充值押金
      </van-button>
    </view>
    <view class="deposit-agree">
      点击充值即同意<text>《充值协议》</text>
    </view>
  </view>
</template>

<script>
  import {
    getPrePayId,
    getQueryDepositAmount
  } from '@/api/order'
  import {
    getUserInfo
  } from '@/api/user'
  export default {
    data() {
      return {
        prepaymentInfo: {},
        lastPath: '',
        amount: ''
      }
    },
    onLoad(options) {
      if (Object.keys(options).length > 0) {
        this.lastPath = options.lastPath
      }
    },
    onShow() {
      this.getPrePayId()
      this.getQueryDepositAmount()
    },
    methods: {
      async getQueryDepositAmount() {
        const data = await getQueryDepositAmount()
        if (data.code === 200) this.amount = data.data
      },
      // 预下单
      async getPrePayId() {

      },
      async payDesposit() {
        const data = await getPrePayId()
        if (data.code === 200) {
          wx.requestPayment({
            ...data.data.payParams,
            success: async (res) => {
              if (this.lastPath === 'home') {
                uni.navigateTo({
                  url: '/subpkg/powerbankInfo/index'
                })
              } else {
                uni.navigateBack()
              }
            }
          })
        }
        // const sign = {
        //   appId: 'wx84951a1351974d5b',
        //   timeStamp: Math.round(new Date().getTime() / 1000).toString(),
        //   nonceStr: this.getRandomString(31),
        //   package: `prepay_id=${this.prepaymentInfo.prepayId}`,
        // }
        // const obj = {
        //   timeStamp: Math.round(new Date().getTime() / 1000).toString(),
        //   nonceStr: this.getRandomString(31),
        //   package: `prepay_id=${this.prepaymentInfo.prepayId}`,
        //   signType: "RSA",
        //   paySign: "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg=="
        // }
        // console.log(obj);
        // uni.requestPayment({

        // })
      },
      getRandomString(length) {
        var result = ''
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
        var charactersLength = characters.length
        for (var i = 0; i < length; i++) {
          result += characters.charAt(Math.floor(Math.random() * charactersLength))
        }
        return result
      },
      //SHA256签名
      singH5(data) {
        let encipher = new jsrsasign.RSAKey()
        // 私钥 在微信端申请好后会有，一般由后端提供
        // 在商户号平台可以找到
        const key = `-----BEGIN PRIVATE KEY-----
      xxxxxxxxxxxxxxxxxxxxxx
      -----END PRIVATE KEY-----`
        // 把私钥转成16进制并设置秘钥
        encipher = jsrsasign.KEYUTIL.getKey(key)
        // 设置SHA256withRSA方式加密
        const sig = new jsrsasign.KJUR.crypto.Signature({
          alg: 'SHA256withRSA',
        })
        // 初始化
        sig.init(encipher)
        // 需要加密的字段，这里注意下一定要按每一个字段一行，切末位加上 \n
        const str = `${data.appId}\n` +
          `${data.timeStamp}\n` +
          `${data.nonceStr}\n` +
          `${data.package}\n`
        const paySign = sig.updateString(str)
        // 加密后,转成base64
        return jsrsasign.hextob64(sig.sign())
      }
    }
  }
</script>

<style lang="less" scoped>
  .pay-deposit {
    padding-top: 25rpx;
    background-color: #F9F9F9;
    height: 98.5vh;

    .deposit-info {
      padding: 45rpx 0 41rpx;
      margin: 0 25rpx 25rpx;
      background-color: #FFFFFF;

      .deposit-notice {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 15px;
          height: 15px;
        }

        text {
          margin-left: 5px;
          font-size: 16px;
          font-family: 'PingFang-SC-Bold', sans-serif;
        }
      }

      .deposit-price {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 51rpx;
        color: #105BDE;

        .title {
          font-size: 14px;
        }

        .price {
          margin-top: 5px;
          font-size: 26px;
          font-family: 'DIN-Medium', sans-serif;
        }
      }
    }

    .deposit-explain {
      margin: 25rpx 25rpx 0;
      padding: 42rpx 35rpx 41rpx 24rpx;
      display: flex;
      flex-direction: column;
      background-color: #FFFFFF;

      text {
        font-size: 13px;
        color: #555555;
        margin-bottom: 10px;
      }
    }

    .deposit-btn {
      margin-top: 161rpx;
      display: flex;
      justify-content: center;

      ::v-deep .van-button {
        width: 540rpx;
        height: 86rpx;
        border-radius: 20rpx;
      }
    }

    .deposit-agree {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      color: #999999;
      font-size: 12px;

      text {
        color: #0262CD;
      }
    }
  }
</style>
